<!-- 直播组件 -->
<template>
  <view class="item-card" @click="navigate(`/package_square/pages/live/index?id=${data.live?.id}`)">
    <view class="flex-shrink-0 relative w-240 h-240 mr-3">
      <view class="tag-num">{{ formatLiveStatus(data.live?.live_status) }}</view>
      <u-image width="100%" height="100%" border-radius="12" :src="data.live?.cover_image" />
    </view>
    <view class="flex-1 flex flex-col text-lines-2">
      <view class="flex-shrink-0 c-#333 text-28 font-bold text-lines-2 mb-7">{{ data.live?.title }}</view>
      <view>
        <view class="flex overflow-x-scroll">
          <text v-for="(item, index) in data.live?.labels" :key="index" class="tag-classfy mr-1">{{ item }}</text>
        </view>
        <view class="flex items-center mt-3"> 
          <view class="flex-1 flex items-center text-single">
            <image class="w-20 h-20" src="/static/images/user/ic_clock.png"></image>
            <view class="ml-1 c-#B5B5B5 text-24">{{ dateFormat(data.live?.start_time, 'YYYY-MM-DD') }}</view>
          </view>
        </view>
        <view class="flex items-center mt-3"> 
          <view class="flex-1 flex items-center text-single">
            <view class="ml-1 c-#B5B5B5 text-24">主讲：{{ data.live?.speaker }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>  

<script setup>
import { navigate } from '@/common/util/uni'
import { dateFormat } from '@/common/util/date'

defineProps({
  data: Object
})

function formatLiveStatus (status) {
  const statusList = {
    0: '预约中',
    1: '直播中',
    2: '已结束'
  }
  return statusList[status]
}
</script>

<style lang='scss' scoped>
.tag-classfy {
  min-width: 120rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  background-color: #E5E5E5;
  color: #8C8C8C;
  font-weight: 400;
  font-size: 24rpx;
}

.tag-num {
  min-width: 100rpx;
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  border-radius: 12rpx 0rpx 12rpx 0rpx;
  background-color: rgba(244, 175, 34, .75);
  padding: 4rpx 20rpx;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 20rpx;
}

.item-card {
  display: flex;
  padding: 32rpx;
  margin-bottom: 24rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}
</style>
